<template>
	<view class="menu_v" >
		<view class="menu_toggle">
			<u-icon name="list-dot" color="#fff" size="50rpx" @click="open('menu')"></u-icon>
		</view>
		<!-- bgColor="#eb4d1d" -->
		<view v-show="menuIsShow" class="mmm_container">
			<view class="menu_container ">
				<!-- <view class="menu_top">
					<view>当前登录用户</view>
					<view>姓名：xxx</view>
					<view>性别：xx</view>
					<view>甲乙丙丁甲乙丙丁</view>
				</view> -->
				<!-- <view class="menu_item" @click="goToPage('/pages/tongmingcha/tongmingcha')">
					同命查
				</view> -->
				<view class="menu_item" @click="goToPage('/pages/xiaobai/xiaobai')">
					小白课堂
				</view>
				<!-- <view class="menu_item" @click="goToPage('/pages/leitai/leitai')">
					擂台赛
				</view> -->
				<view class="menu_item" @click="goToPage('/pages/dashiquanji/dashiquanji')">
					大师全集
				</view>
				<view class="menu_item" @click="goToPage('/pages/study/study')">
					图书学堂
				</view>
				<!-- <view class="menu_item">
					断事笔记
				</view> -->
				<view class="close" @click="close('menu')">
					×
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				menuIsShow: true,
				
			}
		},
		methods:{
			
			
			
			goToPage(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
				// this.close('menu')
				this.$emit('close','menu')
			},
			open(type) {
				// this.open(type)
				this.$emit('open','menu')
			
			},
			close(type) {
				this.$emit('close','menu')
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.menu_v {
		// width:100%;
		// height:100%;
	}
	.close{
		color: white;
		position: absolute;
		right: 20rpx;
		bottom: 260rpx;
		font-size: 40rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #fff;
	}
	.mmm_container {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}
	
	.menu_container {
		width: 550rpx;
		background-color: #000;
		height: 100%;
		padding-top: 90rpx;
		position: fixed;
		top: 0;
	
	}
	
	.menu_item {
		font-size: 35rpx;
		line-height: 50rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #ccc;
		color: #fff;
	}
	.menu_toggle {
		background-color: #ff6d1a;
		position: fixed;
		bottom: 160rpx;
		left: 0;
		padding: 15rpx;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		z-index: 101;
	}
</style>
